<template>
  <div class="info-content info-content-product" @click="openProductTab(productInfo.productId)">
    <div class="content-main">
      <div class="content-left">
        <img class="logo" :src="productImage" alt="" />
      </div>
      <div class="content-right">
        <p class="p-name">
          {{ productInfo.productName }}
        </p>
        <div class="p-type">
          <i class="iconfont icon-leixing"></i>
          <span>{{$t('common.product.productType')}}：{{ productInfo.productCatalog }}</span>
        </div>
        <div class="p-id">
          <i class="iconfont icon-dingdan"></i>
           <span>{{$t('common.product.productNo')}}：{{ productInfo.productSerialNumber }}</span>
        </div>
      </div>
    </div>
    <div class="btns" v-if="operationalData.viewProductAuth===1">
      <!-- 新建工单 -->
      <div v-if="allowCreateTask" class="btn-item">
        <el-dropdown trigger="click">
          <span @click.stop class="btn-text">新建工单</span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="type in operationalData.taskTypeInfo" :key="type.id" @click.native="createTask(type.id)">
              <span>{{type.name}}</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <!-- 新建事件 -->
      <div v-if="allowCreateEvent" class="btn-item">
        <el-dropdown trigger="click">
          <span @click.stop class="btn-text">{{$t('event.setting.constant.flow_map.name1')}}</span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="event in operationalData.eventTypeInfo" :key="event.id" @click.native="createEvent(event.id)">
              <span>{{event.name}}</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
// util
import AuthUtil from '@src/util/auth';
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
import { openAccurateTab } from '@src/util/platform'
import { getOssUrl } from '@src/util/assets'
const imgDefault = getOssUrl('/goodsDefault.png');

export default {
  name: 'product-message',
  inject: ['initData'],
  props: {
    productInfo: {
      type: Object,
      default: () => ({}),
    },
    operationalData:{
      type:Object,
      default:()=>({})
    },
    messageInfo:{
      type:Object,
      default:()=>({})
    },
    conversationNumber: {
      type: String,
    },
  },
  data() {
    return {};
  },
  computed: {
    auths() {
      return this.initData.auths || {};
    },
    allowCreateTask() {
      return AuthUtil.hasAuth(this.auths, 'TASK_ADD')
    },
    allowCreateEvent() {
      return AuthUtil.hasAuth(this.auths, 'CASE_ADD')
    },
    productImage(){
      return this.productInfo.productImage || imgDefault
    }
  },
  methods: {
    // 产品详情页面
    openProductTab (productId) {
      if(this.operationalData.viewProductAuth != 1) return
      let fromId = window.frameElement.getAttribute('id');
      // this.$platform.openTab({
      //   id: `product_view_${productId}`,
      //   title: '产品详情',
      //   close: true,
      //   url: `/customer/product/view/${productId}?noHistory=1`,
      //   fromId,
      // });
      openAccurateTab({
        type: PageRoutesTypeEnum.PageProductView,
        key: productId,
        params: 'noHistory=1',
        fromId
      })
    },
    /** 从产品创建工单 */
    createTask(typeId) {
      let fromId = window.frameElement.getAttribute('id');

      // this.$platform.openTab({
      //   id: 'createTask',
      //   title: '新建工单',
      //   close: true,
      //   url: `/task/createFromProduct/${this.productInfo.productId}?defaultTypeId=${typeId}&conversationNo=${this.conversationNumber}`,
      //   fromId,
      // });
      openAccurateTab({
        type: PageRoutesTypeEnum.PageCreateTaskFromProduct,
        key: this.productInfo.productId,
        params: `defaultTypeId=${typeId}&conversationNo=${this.conversationNumber}`,
        fromId
      })
    },
    /** 从产品创建事件 */
    createEvent(typeId) {
      let fromId = window.frameElement.getAttribute('id');

      // this.$platform.openTab({
      //   id: 'createEvent',
      //   title: '新建事件',
      //   close: true,
      //   url: `/event/createFromProduct/${this.productInfo.productId}?defaultTypeId=${typeId}&conversationNo=${this.conversationNumber}`,
      //   fromId,
      // });
      openAccurateTab({
        type: PageRoutesTypeEnum.PageCreateEventFromProduct,
        key: this.productInfo.productId,
        params: `defaultTypeId=${typeId}&conversationNo=${this.conversationNumber}`,
        fromId
      })
    },
  },
};
</script>

<style scoped lang='scss'>
.info-content-product {
  border: 0;
  width: 320px;
  cursor: pointer;
  .content-main{
    width: 100%;
    display: flex;
    padding-right: 20px !important;
    position: relative;
    padding-bottom: 6px;
  }
  .content-left {
    margin-right: 12px;
    .logo {
      width: 40px;
      height: 40px;
      border-radius: 4px;
    }
  }
  .content-right {
    flex: 1;
    .p-name {
      font-size: 14px;
      font-weight: bold;
      color: #262626;
      line-height: 18px;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      margin-bottom: 6px;
    }
    .p-type,
    .p-id {
      font-size: 13px;
      font-weight: 400;
      color: #595959;
      display: flex;
      .iconfont {
        margin-right: 6px;
        margin-top: -2px;
        color: rgb(226, 226, 226);
      }
    }
  }
  .operation {
    position: absolute;
    right: 4px;
    top: 4px;
  }
  .btns{
    display: flex;
    justify-content: space-around;
    width: 100%;
    padding-top: 6px;
    border-top: 1px solid #E8E8E8;

    .btn-item{
      .btn-text{
        color: $color-primary-light-6;
        cursor: pointer;
      }
    }
  }
}
</style>
<style lang="scss">
  .btn-box{
    display: flex;
    justify-content: space-around;
    .btn-item{
      margin-right: 10px;
    }
  }
</style>